<template>
    <!--语法 v-bind 属性绑定 DOM标签里面的属性-->
    <a href="http://www.baidu.com">点击去百度</a><br>
    <a v-bind:href="url">点击再去百度</a>
    <img :src="imgurl" alt="" width="140px" height="140px">   <!--绑定简写模式 也叫语法糖-->
    <hr>
    <br>
    <!--v-bind动态绑定  更改id class 属性的切换-->
    <p v-bind:id="id"> vbind绑定内容</p>
    <button @click="id='d2'">改变id属性值的颜色</button>
    <button @click="onchange">通过函数改变id的属性</button>
</template>
<script setup>
import {ref} from 'vue'
const url="http://www.baidu.com"
const imgurl ='http://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/170071/1/47018/139544/66fb8b62Fee70ee08/eedef6dd6577f0b7.jpg'
const id=ref("d1")

//创建函数
const onchange = () => { 
    id.value='d2'
}

</script>
<style scoped>
#d1{
    color: red;
}
#d2{
    color: blue;
    font-size: 29px;
}
</style>